DAY2 掌握HTML基本結構

2024 iThome 鐵人賽

DAY 2

佛心分享-SideProject30

新手開發日記：跟著ChatGPT做記帳網頁系列第 2 篇

16th鐵人賽

禮記是Lizzy

2024-09-16 00:11:30

105 瀏覽

分享至

今天的目標是學習HTML的基本概念和結構。HTML（超文本標記語言）是用來建立網頁的標準標記語言，也就是構建網頁的基礎。

HTML的基礎

HTML文檔由一系列的元素構成，這些元素由標籤包圍，用來定義文檔結構。以下使用我們上一篇的測試版為例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget App</title>
</head>
<body>
    <h1>Welcome to My Budget App</h1>
</body>
</html>

<!DOCTYPE html> ：聲明這是HTML5文檔。<!DOOCTYPE>是文檔類型的宣告，也是HTML文檔必要的前置作業。
<html lang="en"> ：標籤定義了整個HTML文檔的範圍。lang=”en”指定文檔語言屬性為英文，這對*搜索引擎優化（SEO）和螢幕閱讀器非常重要，使用這個能確定頁面語言。
<head> ：此標籤包含了所有*元數據（Metadata），這些數據不會顯示在網頁上，但對網頁的表現和行為來說很重要。
<meta charset="UTF-8"> ：此標籤定義了字符編碼為UTF-8，一種被廣泛使用的字符編碼，是ASCII 的擴展版本（向下兼容ASCII），因此前128字符和ASCII完全一致，不過能顯示、處理比ASCII更多的國際字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ：這個標籤為移動裝置設置視窗的屬性。width=device-width 使網頁寬度等於設備螢幕寬度。initial-scale=1.0 設定初始縮放比例為1，這代表網頁將以原始大小顯示，不會縮放。
<title>Budget App</title> ：用來定義網頁標題，這個會顯示在網頁的標題欄或標籤頁上，對SEO也很有幫助。
<body> ：包含所有使用者在網頁上能看到的內容。
<h1>Welcome to My Budget App</h1> ：HTML提供了到的字級標題，是最重要的。（是段落內文）

*註1：搜索引擎優化是透過各種方式影響搜尋引擎的排序，因為使用者往往只會選擇搜尋引擎的前幾的項目，因此這可以讓自己的網站在優秀的搜索排名。（節錄至https://zh.wikipedia.org/zh-tw/搜尋引擎最佳化）
*註2：又稱為後設資料，主要用來描述資料屬性的資訊，算是一種電子式目錄。（節錄至https://zh.wikipedia.org/zh-tw/元数据）

簡單實踐

透過上面的學習，自己也來嘗試創建一個簡單的HTML頁面。

<!DOCTYPE html>
<html lang="zh-Hant">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scal=1.0">
        <title>introduction</title>
    </head>
    <body>
        <h1>新手開發日記：跟著ChatGPT做記帳網頁</h1>
        <p>作為一個程式菜鳥，對於完全沒有經驗的我來說，開發網站既讓人好奇，又因為陌生而感到有些迷茫。不過，時代進步，網路上有很多資源可以讓我們自主學習。這次藉由這個鐵人賽計畫，我會利用 ChatGPT 的協助，嘗試開發一款簡易記帳網頁，並把這段學習的心路歷程記錄下來。</p>
    </body>
</html>